<template>
    <div>
        <section class="uploadRecord">
            
             <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="3D模型" name="mode3D" :lazy="true">
                    <mode-list3d toUrl="modeInfo" modeType="1"></mode-list3d>
                </el-tab-pane>
                <el-tab-pane label="SU模型" name="modeSu" :lazy="true">
                    <mode-list3d toUrl="ModeInfoSu" modeType="2"></mode-list3d>
                </el-tab-pane>
                <el-tab-pane label="概念方案" name="modeConcept" :lazy="true">
                    <mode-list3d toUrl="modeInfoConcept" modeType="4"></mode-list3d>
                </el-tab-pane>
                <el-tab-pane label="施工图" name="modeConstr" :lazy="true">
                    <mode-list3d toUrl="modeInfoConstr" modeType="3"></mode-list3d>
                </el-tab-pane>
                <!-- <el-tab-pane label="预算模板" name="modeBudget" :lazy="true">
                    <mode-list-concept toUrl="modeInfoBudget" modeType="5"></mode-list-concept>
                </el-tab-pane> -->
            </el-tabs>
        </section>
    </div>
</template>
<script>
export default {
    name : "uploadRecord",
    data () {
        return {
            msg : "我是上传记录",
            activeName: 'mode3D'
        }
    },
    methods:{
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    },
    components: {
        page : resolve => require(["../../page"], resolve),//翻页组件,,
        modeList3d : resolve => require(["./uploadModeList/modeList3D"], resolve),//3D，SU上传模块列表
        modeListConcept : resolve => require(["./uploadModeList/modeListConcept"], resolve),//概念方案，预算模板上传模块列表
        modeListConstr : resolve => require(["./uploadModeList/modeListConstr"], resolve)//施工图模块列表
    },
    created () {
        
    }
}
</script>
<style scope>
.uploadRecord{
    background: #fff;
}
.uploadRecord .el-tabs__header{
    width: 100%;
    height: 62px!important;
    font-size: 15px;
    line-height: 42px;
    padding-top: 13px;
    text-align: center!important;
    margin: 0;
    border: none;
    border-bottom: 1px solid #dddddd;

}
.uploadRecord .el-tabs__nav .el-tabs__item.is-active{
    border: none!important;
    border-bottom: 2px solid #ea514b!important;
   
}
.uploadRecord .el-tabs__item{
     padding: 0 12px;
     padding-left: 12px!important;
     padding-right: 12px!important;
     margin-right: 36px;
}
.uploadRecord .el-tabs__nav{
    float: none;
}
.uploadRecord .el-tabs__content{
    padding-left: 11px;
    padding-top: 11px;
}
.uploadRecord .uploadPage{
    padding-top: 0;
}
.el-tabs--left .el-tabs__item:hover {
    border-left: none!important;
}
.urTitle{
    height: 66px;
    padding-top: 9px;
    box-sizing: border-box;
    border-bottom: 1px solid #dddddd;
}
.urTitleLeft{
    float: left;
    font-size: 16px;
    line-height: 56px;
    font-weight: bold;
    margin-left: 40px;
}
.urTitleRight{
    float: right;
    margin-top: 6px;
    margin-right: 18px;
}
.urTitleRight button{
    width: 128px;
    height: 40px;
}
.uploadRecord .uploadImgBox{
    padding-top: 19px;
}
.uploadImgList{
    width: 160px;
    height: 197px;
    float: left;
    margin-left: 19px;
    margin-bottom: 4px;
}
.uploadImgList div{
    width:160px;
    height: 160px;
    position: relative;
}
.uploadImgList div img{
    width:160px;
    height: 160px;
    display: block;
}
.uploadImgList div span{
    position: absolute;
    width: 64px;
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    left:0;
    top: 9px;
}
.audit{
    background: #ff4b4b;
}
.alreadyPassed{
    background: #e1a638;
}
.notThrough{
    background: #999999;
}
.uploadTime{
    font-size: 12px;
    line-height: 36px;
    color: #6b6b6b;
}
.uploadPage{
    width: 100%;
    padding: 58px 0;
}
.uploadPage .el-pagination .btn-next,.uploadPage .el-pagination .btn-prev{
    background: #f6f6f6;
}
.uploadPage .number{
    background: #f6f6f6;
}
.aboutMe .infoItemId{
    color: #fff;
}
</style>
